<template>
  <section class="food-sort-section">
    <div
      v-for="(item, index) in text"
      class="item"
      @click="handleMainSortBtn(item, index)"
      :class="{ vary: textList[index].status }"
    >
      {{ item }}
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="10"
        height="10"
        version="1.1"
        class="svg"
      >
        <polygon
          points=" 0,3 10,3 5,8 "
          fill="#66666"
          :class="{ polygon: textList[index].status }"
          class="icon"
        ></polygon>
      </svg>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      text: [`${this.$route.query.title}`, "排序", "筛选"],
      textList: [],
      detailName: "",
    };
  },
  created() {
    this.text.forEach((item) => {
      this.textList.push({
        name: item,
        status: false,
      });
    });
  },
  methods: {
    handleMainSortBtn(name, index) {
      this.textList[index].status = !this.textList[index].status;

      let is = -1;
      is = !this.textList[index].status ? -1 : index;

      for (let i = 0; i < this.textList.length; i++) {
        if (i !== index) {
          this.textList[i].status = false;
        }
      }

      if (index === 0 && this.textList[0].status) {
        this.text[0] = "分类";
      } else if (index !== 0 || !this.textList[0].status) {
        this.text[0] = this.detailName
          ? this.detailName
          : this.$route.query.title;
      }
      // this.text[0] = index === 0 ? "分类" : this.$route.query.title;

      this.$bus.$on("handleSortDetailBtn", (...args) => {
        this.textList[index].status = args[0];
        this.text[0] = args[1];
        this.detailName = args[1];
      });

      this.$bus.$on("handleSortBtn", (res) => {
        this.textList[index].status = res;
      });

      this.$bus.$on("handleDetermineBtn", (res) => {
        this.textList[index].status = res;
      });
      this.$bus.$emit("handleMainSortBtn", is);
    },
  },
};
</script>
<style lang="less" scoped>
.food-sort-section {
  display: flex;
  border-bottom: 1px solid #eaeaea;
  font-size: 12px;
  color: #333333;

  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;

    width: 33.33333%;
    .svg {
      margin-left: 10px;

      .polygon {
        fill: #3190e8;
        transform: rotate(180deg);
        transform-origin: center;
      }
      .icon {
        transform-origin: center;
        transition: transform 0.3s ease;
      }
    }
  }
  & .item:nth-child(2) {
    border-left: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
  }
  .vary {
    color: #3190e8;
  }
}
</style>